<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡的基本使用</title>
    <style>
      .box {
          width: 200px;
          height: 200px;
          background-color: lime;
          opacity: 0.5;
          /* 过渡的属性  all是所有能过渡的属性都开启过渡 */
          transition-property: all;
          /*过渡的时间 单位s秒 或者ms 毫秒 可以设置多个时间 是区别属性变化时间*/
          transition-duration: 1s;
      }
      .box:hover {
          width: 400px;
          height: 400px;
          background-color: pink;
          box-shadow: 0 0 10px black;
          transform: rotateZ(45deg);
          opacity: 1;
      }
    </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>